// 导入React（虽然在这个简单组件中不需要显式使用，但保持一致性）
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import React from 'react';
import './App.css';
// 导入主题样式系统
import './styles/themes.css';
// 引入 i18n 初始化
import './i18n';
// 导入Redux相关组件
import { Provider } from 'react-redux';
import { store } from './store';
import DigitalHumanPage from './components/DigitalHumanPage';
// 路由
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import LoginPage from './pages/LoginPage';
// 读取登录状态用于路由守卫
import { useAppSelector } from './store/hooks';

// 内部应用，放在 Provider 内部使用 Redux hooks
const InnerApp: React.FC = () => {
  const user = useAppSelector((state) => state.auth.user);
  return (
    <BrowserRouter>
      <Routes>
        {/* 登录页 */}
        <Route path="/login" element={<LoginPage />} />
        {/* 首页：未登录则重定向到登录页 */}
        <Route path="/" element={user ? <DigitalHumanPage /> : <Navigate to="/login" replace />} />
        {/* 其他路径重定向到登录页 */}
        <Route path="*" element={<Navigate to="/login" replace />} />
      </Routes>
    </BrowserRouter>
  );
};

function App() {
  return (
    // 使用Redux Provider包装整个应用，提供全局状态管理
    <Provider store={store}>
      <div className="App">
        <InnerApp />
      </div>
    </Provider>
  );
}

export default App;